<template>
	<!--成员信息-->
	<view class="page-content">
		<view class="page-body">
			<!--成员信息-->
			<view class="body-box">
				<view class="sel-row">
					<view class="sel-row-t">头像：</view>
					<view class="sel-row-box" @click="chooseimg">
						<image class="sel_img" :src="objdata.img || $mAssetsPath.icon_mrtx"></image>
						<view v-if="emitInfoStatu" class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row">
					<view class="sel-row-t">昵称：</view>
					<view class="sel-row-box" @click="toedit('name')">
						<view class="sel_name">{{objdata.nickname}}</view>
						<view v-if="emitInfoStatu || memberStatu" class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row">
					<view class="sel-row-t">电话：</view>
					<view class="sel-row-box">
						<view class="sel_name">{{objdata.mobile}}</view>
						<view class="sel_pho" @click="tophone(objdata.mobile)">拨打</view>
						<view class="sel_edit" v-if="emitInfoStatu" @click="toedit('mobile')">编辑</view>
					</view>
				</view>
				<view class="sel-row">
					<view class="sel-row-t">邮箱：</view>
					<view class="sel-row-box" @click="toedit('email')">
						<view class="sel_name">{{objdata.email}}</view>
						<view v-if="emitInfoStatu" class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row">
					<view class="sel-row-t">系统身份：</view>
					<view class="sel-row-box">
						<view class="sel_name">{{objdata.type === 0 ?'创建者':objdata.type === 1?'公司成员':objdata.type === 2?'供应商':'' }}</view>
						<!-- <view v-if="user_statu.contact" class="icons icon-gengduo"></view> @tap="toggleTab2('2')" -->
					</view>
				</view>
				<view class="sel-row" v-if="userType==='c'">
					<view class="sel-row-t">系统小组：</view>
					<view class="sel-row-box" @tap="toggleTab2('2')">
						<view class="sel_name">{{objdata.group_name === null?'公司成员':objdata.group_name}}</view>
						<view v-if="groupStatu"  class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row">
					<view class="sel-row-t">系统岗位：</view>
					<view class="sel-row-box"  @tap="toggleTab2('1')">
						<view v-if="userType == 'c'" class="sel_name">{{objdata.role_name}}</view>
						<view v-else class="sel_name">{{objdata.is_admin == 0 ? '成员' : '主管'}}</view>
						<view  v-if="powerStatu"  class="icons icon-gengduo"></view>
					</view>
				</view>
				<view class="sel-row" v-if="userType==='d'">
					<view class="sel-row-t">供应商：</view>
					<view class="sel-row-box"  @tap="toggleTab2('2')">
						<view class="sel_name">{{objdata.group_name}}</view>
						<view v-if="groupStatu"  class="icons icon-gengduo"></view>
					</view>
				</view>
			</view>
			<view class="body-box">
				<view class="but-row" @click="todet(objdata.uid,objdata.nickname)">
					<image class="but_icon" :src="$mAssetsPath.icon_msg"></image>
					<view class="but_txt1" >发消息</view>
				</view>
				<view class="but-row" v-if="memberStatu" @click="deletes(objdata.id)">
					<image class="but_icon" :src="$mAssetsPath.icon_shanchu"></image>
					<view class="but_txt2">删除</view>
				</view>
			</view>
		</view>
		<!--编辑框-->
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-tit" v-if="tipType===1 || tipType===2">{{tipType===1?'编辑':tipType===2?'新增':''}}</view>
				<view class="w-con">
					<view class="input-row" v-if="tipType===1 || tipType===2">
						<input class="input-row-w" type="text" v-model="searchVal" placeholder="请输入编辑内容"
							confirm-type="search" placeholder-style="color:#999"></input>
						<image class="icon-tb3" v-if="searchVal!=''" @click.stop="clear"
							:src="$mAssetsPath.icon_qingchu"></image>
					</view>
					<view class="txt-row" v-if="tipType===3">{{tipType === 3?'是否确认删除？':'您无该权限，请联系管理员！'}}</view>
				</view>
				<view class="w-but">
					<view class="w-but-txt" @click="cancel('tip')">取消</view>
					<view class="w-but-txt" @click="confirm">确认</view>
				</view>
			</view>
		</w-popup>
		<!-- 下拉框 -->
		<u-popup class="popup-content" mode='bottom' border-radius="16" v-model="show">
			<view class="header">
				<view class="title">{{poptype==='1'?'任命：':poptype==='2'?'移动到：':''}}</view>
			</view>
			<scroll-view class="body" scroll-y="true">
				<block v-for="(item,index) in list" :key="index">
					<view class="box" @click="checks(item.id,item.checked)">
						<view class="box-name" :style="{color:item.checked?'#198FFF':'#999'}">{{item.label}}</view>
						<view class="box-icon">
							<image class="box-icon-dagou" v-if="item.checked" :src="$mAssetsPath.icon_dagou"></image>
						</view>
					</view>
				</block>
			</scroll-view>
			<view @tap="cancel" hover-class="none" class="footer">取消</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		getCompanyUserInfos, //获取用户信息
		getOssUploadsParams, //获取上传oss
		editUserInfos, //用户信息修改
		getGroupLists, //分组列表
		getRoleLists, //岗位列表
		setSystemGroups, //设置分组
		setSystemStations, //设置岗位
		delUsers, //移除用户
		setSupplierAdmins,		//设置供应商主管 
	} from '@/common/api.js';
	import wSelSearch from '@/components/w-sel-logo/w-sel-search.vue'; //搜索
	import uPopup from "@/components/u-popup/u-popup.vue";//弹窗
	import wPopup from '@/components/w-popup/w-popup2.vue';// 编辑框
	import store from '@/store';
	export default {
		components: {
			wSelSearch,
			uPopup,
			wPopup
		},
		data() {
			return {
				userType:'', //c-公司 d-供应商
				tipType:0,  // 1-编辑 2-新增 3-删除
				searchVal:'',
				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				emitInfoStatu:false, //修改个人信息权限
				powerStatu:false, //修改权限管理
				groupStatu:false, //修改分组权限
				memberStatu:false, //成员管理
				emitType:'',
				
				show: false, //弹窗
				poptype: 1, //弹窗类型
				list: [], //下拉框数据
				objdata: {
					uid:99,
					head: '/static/data-img/img.jpg',
					name: '阿萨德',
					mobile: '13888888888',
					email: '1234567@qq.com',
					syscid: '公司成员',
					systeam: '设计组',
					syepost: '主管'
				},
				user_statu:{ //权限
					add_statu:true,
					replace_statu:false,
					stick_del_statu:false,
					contact:true,
				},
				params:{
					company_id:'',
					uid:'',
					group_id:0,
					role_id:0
				},
				params2:{
					company_id:'',
					type:''
				},
				is_admin:false
				
			}
		},
		computed: {
			...mapGetters(['companyInfo', 'userInfo','userRole']),
		},
		onShow() {
			this.params.company_id = this.companyInfo.id;
			this.params2.company_id = this.companyInfo.id;
			
			if(this.userInfo.type === 0){ //创始人
				this.is_admin = true;
				this.powerStatu = true;
				this.groupStatu = true;
				this.memberStatu = true;
			}else{ //对应权限
				this.powerStatu = this.userRole.groupStatu; //权限管理
				this.groupStatu = this.userRole.groupStatu; //组别管理
				console.log(this.userInfo.role_arr)
				let index = this.userInfo.role_arr.findIndex(val => val == 6)
				this.memberStatu = index == -1 ? false : true; //成员管理
			}
			console.log(this.userRole)
			console.log(this.memberStatu)
			this.getdata();
		},
		onLoad(option) {
			console.log(222, option)
			if (option.userType) {
				this.userType = option.userType;
			}
			if(option.id){
				this.params.uid = option.id;
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(123, e)
			if (e.index === 0) {
				console.log(444)
				uni.navigateTo({
					url: `/pages/contact/contactSearch`
				})
			}
		},
		methods: {
			...mapActions('user',['setUserInfo']),
			//获取用户信息
			getdata() {
				getCompanyUserInfos(this.params).then(res=>{
					if(res.code === 2000){
						this.objdata = res.data;
						if(this.userInfo.uid === res.data.uid){
							this.setUserInfo(res.data);
							this.emitInfoStatu = true;
						}
					}
				})
			},
			//跳转聊天
			todet(id,name){
				/* uni.navigateTo({
					url:`/pages/message/messageInfo?id=${uid}`
				}) */
				let uid = this.params.company_id + ':' + id;
				this.$store.commit('createConversationActive',uid)
				uni.navigateTo({
					url: `/pages/message/messageInfo?id=${uid}&name=${name}&type=C2C`
				})	
			},
			//相册更换头像
			chooseimg(){
				if(this.emitInfoStatu){
					let _self = this;
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							console.log(111,JSON.stringify(res));
							let filename = res.tempFiles[0]
							let file_path = res.tempFilePaths[0]
							//let suffix = "."+filename.extname;
							let file_name = new Date().getTime() + Math.random().toString(36).substring(3, 20) + filename.name;
							console.log(312,file_name,filename)
							getOssUploadsParams().then(res=>{
								console.log(123,res)
								let uploadTask = uni.uploadFile({
								    url: res.data.host,
								    filePath: file_path,
								    fileType: 'image',
								    name: 'file',
								    formData: {
								        name: file_path,
								        'key': res.data.dir+file_name,
								        'policy': res.data.policy,
								        'OSSAccessKeyId': res.data.accessid,
								        'success_action_status': '200',
								        //让服务端返回200,不然，默认会返回204
								        'signature': res.data.signature,
								    },
								    success: (res2) => {
								        console.log('uploadImage success, res is:', res2)
										let imgs = res.data.host + '/' + res.data.dir + file_name;
										//头像-修改接口
										editUserInfos({img:imgs}).then(res3=>{
											console.log(123,res3)
											if(res3.code === 2000){
												uni.showToast({
												    title: '修改成功！',
												    icon: 'success',
												    duration: 1000
												});
												_self.getdata();
											}else{
												uni.showToast({
												    title: res3.msg,
												    icon: 'success',
												    duration: 1000
												});
											}
										})
								    },
								    fail: (err) => {
								        console.log('uploadImage fail', err);
								        uni.showModal({
								            content: err.errMsg,
								            showCancel: false
								        });
								    }
								});
								uploadTask.onProgressUpdate((res) => {
								    console.log("上传进度" + res.progress);
								    this.progres = res.progress;
								});
							})
						}
					});
				}
			},
			//拨打电话
			tophone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			//编辑框
			toedit(type){
				this.emitType = type;
				if(this.emitInfoStatu){
					if(type==='name'){
						this.searchVal = this.objdata.nickname
						this.tipType = 1;
						this.showtip = true;
						this.content1 = 'center';
						this.type1 = 'center';
					}else if(type === 'mobile'){
						uni.navigateTo({
							url:`/pages/user/replaceMobile?mobile=${this.objdata.mobile}`
						})
					}else if(type === 'email'){
						this.searchVal = this.objdata.email
						this.tipType = 1;
						this.showtip = true;
						this.content1 = 'center';
						this.type1 = 'center';
					}
				}
			},
			//删除
			deletes(){
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
				if(this.is_admin || this.memberStatu){
					this.tipType = 3;
				}else{
					this.tipType = 4;
				}
			},
			getData() {
				if(this.userType === 'c'){
					this.params2.type = 1;
				}else if(this.userType === 'd'){
					this.params2.type = 2;
				}
				if(this.poptype === '2'){ //小组列表 供应商分组列表
					getGroupLists(this.params2).then(res=>{
						if(res.code === 2000){
							this.list = res.data;
							let list = {
								id:0,
								name:''
							}
							if(this.userType === 'c'){
								list.name = '公司成员';
							}else if(this.userType === 'd'){
								list.name = '待分组';
							}
							this.list.unshift(list);
							if(this.list && this.list.length>0){
								this.list.forEach(item=>{
									this.$set(item, 'checked', false)
									this.$set(item, 'label', item.name)
									if(item.id === this.objdata.group_id){
										item.checked = true;
									}else if(this.objdata.group_id === null && item.id === 0){
									  item.checked = true;
									}
								})
							}
						}
					})
				}else if(this.poptype === '1'){
					
					getRoleLists({company_id:this.params2.company_id}).then(res=>{
						if(res.code === 2000){
							this.list = res.data;
							if(this.list && this.list.length>0){
								this.list.forEach(item=>{
									this.$set(item, 'checked', false)
									this.$set(item, 'label', item.name)
									if(item.id === this.objdata.role_id){
										item.checked = true;
									}
								})
							}
						}
					})
				}
				
			},
			checks(id, checked) {
				if (this.list && this.list.length > 0) {
					this.list.forEach(item => {
						if (item.id === id) {
							item.checked = true
							if(this.poptype === '2'){ //小组列表 供应商分组列表
							     if(id != 0){
							     	 this.params.group_id = id
							     }else{
							     	 this.params.group_id = ''
							     }
								setSystemGroups(this.params).then(res =>{
									if(res.code === 2000){
										uni.showToast({
											title:'设置成功！',
											icon:'none',
											duration:2000
										})
										this.getdata();
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none',
											duration:2000
										})
									}
								})
							}else if(this.poptype === '1'){
								if(this.userType == 'c') {
									this.params.role_id = id
									setSystemStations(this.params).then(res=>{
										if(res.code === 2000){
											uni.showToast({
												title:'设置成功！',
												icon:'none',
												duration:2000
											})
											this.getdata();
										}else{
											uni.showToast({
												title:res.msg,
												icon:'none',
												duration:2000
											})
										}
									})
								} else {
									this.params.type = id
									setSupplierAdmins(this.params).then(res => {
										if(res.code === 2000){
											uni.showToast({
												title:'设置成功！',
												icon:'none',
												duration:2000
											})
											this.getdata();
										}else{
											uni.showToast({
												title:res.msg,
												icon:'none',
												duration:2000
											})
										}
									})
								}
							}
						} else {
							item.checked = false
						}
					})
				}
				this.show = false;
				
			},
			//弹窗
			toggleTab2(poptype) {
				this.poptype = poptype
				console.log(this.userType)
				if(poptype === '2'){
					if(this.groupStatu){
						this.show = true;
						if(this.userType === 'c' || this.userType === 'd'){
							this.getData();
						}
					}
				}else if(poptype === '1'){
					if(this.powerStatu){
						this.show = true;
						if(this.userType === 'c'){
							this.getData();
						} else if (this.userType === 'd') {
							this.list = [
								{
									id: 0,
									label: '成员',
									checked: this.objdata.is_admin == 0
								},
								{
									id: 1,
									label: '主管',
									checked: this.objdata.is_admin == 1
								}
							]
						}
					}
				}
			},
			toggleTab(str, index) {
				this.selecl_num = index;
				this.$refs[str].show();
			},
			//下拉选择
			onSelctXL(e) {
				if (this.active === 1) {
					this.params.groupname = e.result;
				} else if (this.active === 2) {
					this.params2.groupname = e.result;
				}

			},
			//确认
			confirm() {
				if(this.tipType === 1){
					if(this.emitInfoStatu){
						if(this.emitType==='name'){
							editUserInfos({user_id: this.objdata.uid, nickname:this.searchVal}).then(res=>{
								if(res.code === 2000){
									uni.showToast({
									    title: '修改成功！',
									    icon: 'success',
									    duration: 1000
									});
									this.getdata();
								}else{
									uni.showToast({
									    title: res.msg,
									    icon: 'success',
									    duration: 1000
									});
								}
							})
						}else if(this.emitType === 'email'){
							editUserInfos({email:this.searchVal}).then(res=>{
								if(res.code === 2000){
									uni.showToast({
									    title: '修改成功！',
									    icon: 'success',
									    duration: 1000
									});
									this.getdata();
								}else{
									uni.showToast({
									    title: res.msg,
									    icon: 'success',
									    duration: 1000
									});
								}
							})
						}
					}
				}else if(this.tipType === 3){
					if(this.is_admin){
						delUsers({id:this.objdata.id}).then(res=>{
							if(res.code === 2000){
									uni.showToast({
										title:'移除成功！',
										icon:'none',
										duration: 2000
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
										})
									}, 1000)
								}
							})					
					}
				}
				this.showtip = false
			},
			change(e) {
				this.current = e.detail.current
			},
			//取消
			cancel(){
				this.show = false
				this.showtip = false
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false
				}
			},
			//清空
			clear() {
				this.searchVal = '';
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			/* if (this.$refs.indexPage) {
				this.$refs.indexPage.getData()
				console.log(1231)
			} */
		}
	}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;
	
		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	
		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;
	
			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}
	
			.w-but-txt:last-of-type {
				border-right: none;
			}
		}
	
		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 60rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.txt-row{
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				color: $font-color-3;
			}
	
			.input-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 66rpx;
				background: #fff;
				border-radius: 10rpx;
				background: $uni-bg-color-grey;
	
				.icon-tb3 {
					width: 34rpx;
					height: 34rpx;
					margin: 0 20rpx;
				}
	
				.input-row-w {
					padding-left: 30rpx;
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20px;
					color: $font-color-9;
					width: calc(100% - 74rpx);
				}
			}
		}
	}
	/* 下拉窗口 */
	.popup-content {
		display: flex;
		flex-direction: column;

		.header {
			display: flex;
			border-bottom: 1rpx solid #eee;
			height: 100rpx;

			.title {
				line-height: 100rpx;
				padding: 0 30rpx;
				text-align: left;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.body {
			display: flex;
			max-height: 500rpx;
			flex-direction: column;

			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				border-bottom: 1rpx solid #eee;
				font-size: 36rpx;
				.box-name {
					margin-right: 30rpx;
				}
				.box-icon {
					width: 34rpx;
					.box-icon-dagou {
						width: 34rpx;
						height: 28rpx;
					}
				}
			}
		}
		.footer {
			height: 100rpx;
			color: $font-color-r;
			font-size: 36rpx;
			text-align: center;
			line-height: 88rpx;
			background: $uni-bg-color;
			margin-right: 50rpx;
		}
	}

	.required {
		color: #FE5252;
		font-size: 28rpx;
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-body {
			display: flex;
			flex-direction: column;


			.body-box {
				margin-top: 20rpx;
				padding: 0 30rpx;
				background: $uni-bg-color;
				display: flex;
				flex-direction: column;
				height: 100%;

				.but-row {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					flex-direction: row;
					border-bottom: 1rpx solid #f5f5f5;
					background: $uni-bg-box-color;

					.but_icon {
						width: 30rpx;
						height: 30rpx;
						margin-right: 20rpx;
					}

					.but_txt1 {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-b3;
					}

					.but_txt2 {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-r;
					}
				}

				.sel-row {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					flex-direction: row;
					border-bottom: 1rpx solid #f5f5f5;
					background: $uni-bg-box-color;

					.sel-row-t {
						font-size: 32rpx;
						font-weight: 400;
						color: $font-color-3;
						width: 200rpx;
					}

					.sel-row-box {
						width: calc(100% - 200rpx);
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.sel_img {
							width: 52rpx;
							height: 52rpx;
							border-radius: 26rpx;
							margin-right: 10rpx;
						}

						.sel_name {
							font-size: 32rpx;
							font-weight: 400;
							margin-right: 10rpx;
							color: $font-color-9;
						}

						.icons {
							color: $font-color-9;
						}

						.sel_pho {
							margin-left: 20rpx;
							font-size: 24rpx;
							color: $font-color-b3;
							border: 1rpx solid $border-color-blue;
							padding: 0 10rpx;
							height: 42rpx;
							line-height: 40rpx;
							border-radius: 4rpx;
						}
						.sel_edit{
							margin-left: 20rpx;
							font-size: 24rpx;
							color: $font-color-9;
							border: 1rpx solid $font-color-9;
							padding: 0 10rpx;
							height: 42rpx;
							line-height: 40rpx;
							border-radius: 4rpx;
						}
					}
				}
			}
		}
	}
</style>
